<template>
  <div class="dashboard-container">
    <!-- 核心指标卡片区 -->
    <div class="metrics-section">
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <ArticleMetricCard
            value="128"
            :trend="15.2"
            trend-text="本月新增"
            trend-class="trend-up"
          />
        </a-col>
        <a-col :span="6">
          <ViewMetricCard
            value="12,847"
            :trend="23.8"
            trend-text="本周增长"
            trend-class="trend-up"
          />
        </a-col>
        <a-col :span="6">
          <CommentMetricCard
            value="1,456"
            :trend="8.6"
            trend-text="本周新增"
            trend-class="trend-up"
          />
        </a-col>
        <a-col :span="6">
          <WordMetricCard
            value="156K"
            :trend="-2.1"
            trend-text="较上月"
            trend-class="trend-down"
          />
        </a-col>
      </a-row>
    </div>

    <!-- 趋势图表区 -->
    <TrendCharts />

    <!-- 实时数据区 -->
    <RealtimeData />

    <!-- 搜索分析区 -->
    <SearchAnalysis />

    <!-- 系统状态区 -->
    <SystemStatus />
  </div>
</template>

<script lang="ts" setup>
  import { onMounted } from 'vue';
  import ArticleMetricCard from './components/article-metric-card.vue';
  import ViewMetricCard from './components/view-metric-card.vue';
  import CommentMetricCard from './components/comment-metric-card.vue';
  import WordMetricCard from './components/word-metric-card.vue';
  import TrendCharts from './components/trend-charts.vue';
  import RealtimeData from './components/realtime-data.vue';
  import SearchAnalysis from './components/search-analysis.vue';
  import SystemStatus from './components/system-status.vue';

  onMounted(() => {
    // 这里可以添加数据刷新逻辑
  });
</script>

<script lang="ts">
  export default {
    name: 'Dashboard',
  };
</script>

<style lang="less" scoped>
  .dashboard-container {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    width: 100%;
    max-width: none;

    .metrics-section {
      margin-bottom: 32px;
    }
  }

  // 响应式适配
  @media (max-width: 1200px) {
    .dashboard-container {
      padding: 16px;

      .metrics-section {
        margin-bottom: 24px;
      }
    }
  }

  @media (max-width: 768px) {
    .dashboard-container {
      padding: 12px;

      .metrics-section {
        margin-bottom: 20px;

        :deep(.arco-col) {
          margin-bottom: 12px;
        }
      }
    }
  }
</style>
